// carousel.js - 轮播图控制逻辑 + 下拉菜单交互
document.addEventListener('DOMContentLoaded', function() {
    // --------------------------
    // 轮播图控制逻辑（保留现有代码）
    // --------------------------
    const slidesContainer = document.querySelector('.banner-slides');
    const slides = document.querySelectorAll('.banner-slide');
    const prevBtn = document.querySelector('.pre');
    const nextBtn = document.querySelector('.next');

    let currentIndex = 0;
    const slideCount = slides.length;
    const slideWidth = 100 / slideCount;

    function updateSlidePosition() {
        slidesContainer.style.transform = `translateX(-${currentIndex * slideWidth}%)`;
        slidesContainer.style.transition = 'transform 0.5s ease-in-out';
    }

    prevBtn.addEventListener('click', (e) => {
        e.preventDefault();
        slidesContainer.style.animation = 'none';
        currentIndex = (currentIndex - 1 + slideCount) % slideCount;
        updateSlidePosition();
    });

    nextBtn.addEventListener('click', (e) => {
        e.preventDefault();
        slidesContainer.style.animation = 'none';
        currentIndex = (currentIndex + 1) % slideCount;
        updateSlidePosition();
    });

    slidesContainer.addEventListener('mouseenter', () => {
        slidesContainer.style.animationPlayState = 'paused';
    });

    slidesContainer.addEventListener('mouseleave', () => {
        slidesContainer.style.animationPlayState = 'running';
    });


       // --------------------------
    // 修复：下拉菜单交互逻辑
    // --------------------------
    const navItems = document.querySelectorAll('.nav li');
    let hideTimer;

    navItems.forEach(item => {
        const dropdown = item.querySelector('.dropdown-menu');
        if (!dropdown) return;

        // 鼠标进入导航项 - 立即显示
        item.addEventListener('mouseenter', () => {
            clearTimeout(hideTimer);
            dropdown.classList.add('active');
            dropdown.style.display = 'block'; // 确保显示
        });

        // 鼠标离开导航项 - 延迟隐藏
        item.addEventListener('mouseleave', (e) => {
            hideTimer = setTimeout(() => {
                // 检查鼠标是否在下拉菜单外
                if (!dropdown.contains(e.relatedTarget)) {
                    dropdown.classList.remove('active');
                    setTimeout(() => {
                        dropdown.style.display = 'none'; // 隐藏完成后设置display
                    }, 300); // 与CSS过渡时间一致
                }
            }, 200); // 缩短延迟时间，提升响应速度
        });

        // 鼠标进入下拉菜单 - 保持显示
        dropdown.addEventListener('mouseenter', () => {
            clearTimeout(hideTimer);
            dropdown.classList.add('active');
        });

        // 鼠标离开下拉菜单 - 立即隐藏
        dropdown.addEventListener('mouseleave', (e) => {
            clearTimeout(hideTimer);
            // 检查鼠标是否在导航项外
            if (!item.contains(e.relatedTarget)) {
                dropdown.classList.remove('active');
                setTimeout(() => {
                    dropdown.style.display = 'none';
                }, 300);
            }
        });
    });

    // 为最左侧独立大图添加悬停效果（不影响商品卡片内图片）
    const leftSideImages = document.querySelectorAll('.house-img img');
    const leftSideImage = document.querySelectorAll('.big-img img');
    leftSideImages.forEach(img => {
        // 存储原始样式，避免影响其他图片
        const originalTransform = img.style.transform || 'translateY(0)';
        const originalBoxShadow = img.style.boxShadow || 'none';
        const originalTransition = img.style.transition || '';

        // 鼠标悬停时的效果
        img.addEventListener('mouseenter', () => {
            img.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)';
            img.style.transform = 'translateY(-8px)';
            img.style.boxShadow = '0 12px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.05)';
        });

        // 鼠标离开时恢复原状
        img.addEventListener('mouseleave', () => {
            img.style.transform = originalTransform;
            img.style.boxShadow = originalBoxShadow;
            img.style.transition = originalTransition;
        });
    });
    leftSideImage.forEach(img => {
        // 存储原始样式，避免影响其他图片
        const originalTransform = img.style.transform || 'translateY(0)';
        const originalBoxShadow = img.style.boxShadow || 'none';
        const originalTransition = img.style.transition || '';

        // 鼠标悬停时的效果
        img.addEventListener('mouseenter', () => {
            img.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)';
            img.style.transform = 'translateY(-8px)';
            img.style.boxShadow = '0 12px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.05)';
        });

        // 鼠标离开时恢复原状
        img.addEventListener('mouseleave', () => {
            img.style.transform = originalTransform;
            img.style.boxShadow = originalBoxShadow;
            img.style.transition = originalTransition;
        });
    });
});